import React, { Component } from 'react';

import styled from 'styled-components'

import { Tabs, WhiteSpace } from 'antd-mobile';

import BScroll from 'better-scroll'

import { Link } from "react-router-dom"

import axios from 'axios'

const CategoryContainer = styled.div`
  flex:1
  overflow:hidden
  background：#ccc
  font-family: Arial
  .am-tabs-default-bar-tab-active{
    color:#fe4070;
}
.am-tabs-default-bar-underline{
    border-color:#fe4070;!important
}
  li{
    margin-bottom: 8px
    background: white
    box-sizing: border-box
    a{
        width: 100%;
        display: block;
        overflow: hidden;
        position: relative;
        text-decoration: none
        color:#666
        .discuss{
            font-size: 11px;
            padding: 4px 7px;
            position: absolute;
            left: 0;
            top: 1.2rem;
            z-index: 1;
            border: 1px solid #eee;
            border-left: 0;
            border-top-right-radius: .3rem;
            border-bottom-right-radius: .3rem;
            color: #666;
            background: rgba(251,251,251,.8)
        }
        .goods_topsmall{
            overflow: hidden;
            text-align: center;
            padding-top:.05rem
        }
        .goods_middle{
          font-size: .14rem;
          max-height: .4rem;
          line-height: .18rem;
          padding: 0 .1rem;
          margin-top: .1rem;
          color: #424242;
          overflow: hidden;
          text-align:left
         
         .tag{
            color: #fe4070;
            display: inline-block;
            white-space: nowrap
            height:.2rem
           
          }    
        }
        .goods_foot{
          padding:.12rem
          overflow:hidden
          display:flex
          justify-content: space-between
          .price{
            display:flex
            flex-direction:column
            .ct{
              font-size: 18px;
              color: #fe4070;
              display:inline-block
              margin-bottom:.05rem
            }
            .jm{
              font-size: 11px;
              color: #999;
              display: block;
            }
          }
          .group{
            width:.88rem
            height:.26rem
            border-radius: 25px;
            border: .0625rem solid #fe4070;
            margin-top: .25rem;
            background: #fe4070;
            color:white
           position:relative
           bottom:.3rem
          }
        }
        
    }
}

`
//渲染列表
const GoodsItem = props => {
  return (

    <ul>
      {
        props.list.map(item => {
          return (
            <li
              key={item.item_id}
              style={{
                width: '100%'
              }}
            >
              <Link
                to={{
                  pathname: '/detail',
                  search: `?goodstitle=${item.short_name}&goodsimg=${item.image}&nowprice=${item.jumei_price}&delprice=${item.single_price}&id=${item.item_id}&jugement=${item.buyer_number_text}`,

                }}
              >
                <div className="discuss">
                  {item.buyer_number_text}
                </div>
                <div className="goods_topsmall">
                  <img
                    style={{ width: '1.5rem', height: '1.5rem', marginBottom: '.2rem' }}
                    src={item.image} alt="" />
                </div>
                <div className="goods_middle">
                  <span className='tag'>{item.group_name_tag}</span>
                  <span className='short_name'>{item.short_name}</span>
                </div>
                <div className="goods_foot">
                  <div className="price">
                    <span className="ct">￥{item.jumei_price}</span>
                    <span className="sc"></span>
                    <span className="jm">单买价：￥{item.single_price}</span>
                  </div>
                  <div className="group">
                    <span>去拼团</span>
                  </div>
                </div>
              </Link>
            </li>
          )
        })
      }
    </ul>

  )
}


class Category extends Component {

  constructor(props) {
    super(props)

    this.state = {
      categorys: [],
    }
  }

  getItem = () => {
    return this.state.categorys && this.state.categorys.map(item => <GoodsItem key={item.item_id} {...item} />)

  }
  renderContent = () => {
    //这里的tab是数组里的每一项数据

    return (
      <div>
        {
          this.getItem()
        }
      </div>
    )
  }


  render() {
    return (
      <CategoryContainer
        ref={el => this.div = el}
        style={{overflow:'hidden'}}
        >
      
        <div>
          <WhiteSpace />
          <Tabs tabs={this.state.categorys && this.state.categorys}
            tabBarActiveTextColor={"#fe4070"}
            renderTabBar={props => <Tabs.DefaultTabBar  {...props} pages={1} />}
          >
            {this.renderContent}
          </Tabs>
          <WhiteSpace />
        </div>
      </CategoryContainer>
    )
  }

  componentDidMount() {
    document.title="聚美拼团儿"
    new BScroll(this.div, {
      click: true,
      mouseWheel: {
        speed: 20
      }
    })
    // 数据请求
    axios({
      url: '/mock/coutuan.json'
    }).then(data => {
      this.setState({
        categorys: data.data
      })
      // console.log(data)
    }).catch(error => console.log(error))

  }

}

export default Category